<template>
	<view class="userRealName">
		<view class="userRealNameTips">
			身份证照片仅用于订单信息留存，平台不会对对泄漏
		</view>

		<view class="userRealNameContent">
			<view class="userRealNameContentTips">
				<view>请上传本人真实有效的身份证照片</view>
				<view>拍摄要求 ></view>
			</view>

			<view class="userRealNameContentUpload">
				<view @click="uploadFileImage(1)">
					<image style="width: 100%;height: 100px;" mode="aspectFit" :src="idCardHead"></image>
				</view>

				<view @click="uploadFileImage(2)">
					<image style="width: 100%;height: 100px;" mode="aspectFit" :src="idCardReserve"></image>
				</view>
			</view>

			<text style="font-weight: bold;">请确认识别信息是否准确，若信息有误可重新上传</text>

			<view class="userInfo">
				<image style="width: 30px; height: 30pxpx;" mode="widthFix"
					src="https://img.youxuanan.com/crmebimage/public/product/2024/08/29/f39bc2af97ae4d468ccc030cfec64af9zs7bvd025a.jpg">
				</image>
				<view>{{userInfo.data.face.data.name ? userInfo.data.face.data.name : '证件姓名'}}</view>
			</view>

			<view class="userInfo">
				<image style="width: 30px; height: 30pxpx;" mode="widthFix"
					src="https://img.youxuanan.com/crmebimage/public/product/2024/08/29/38de70076c9145908c7832ac23daddb6ngpe26frbp.jpg">
				</image>
				<view>{{userInfo.data.face.data.idNumber ? userInfo.data.face.data.idNumber : '身份证号'}}</view>
			</view>

			<view class="userInfo">
				<image style="width: 30px; height: 30pxpx;" mode="widthFix"
					src="https://img.youxuanan.com/crmebimage/public/product/2024/08/29/a30076e1935343d1938c3168dfa683458qqej66st9.jpg">
				</image>
				<view>{{phone ? phone : '手机号'}}</view>
			</view>
		</view>

		<button class="uploadUserInfo" @click='uploadUserInfo'>确认上传</button>
	</view>
</template>

<script>
	import {
		uoloadAliIdCard,
		analyseAliIdCard,
		aliIdCardInfoUpload,
		aliminiLogin
	} from '@/api/user.js'

	import {
		uoloadImage
	} from '@/api/public.js';
	import Cache from '@/utils/cache';
	export default {
		data() {
			return {
				idCardHead: 'https://img.youxuanan.com/crmebimage/public/product/2024/08/29/13bfc81dda79478f80d057537ab98118cv4ukt7zu2.jpg',
				idCardReserve: 'https://img.youxuanan.com/crmebimage/public/product/2024/08/29/f1c84a3fd596466b8a1d6502ff75957akm4uz0vsdt.jpg',
				userInfo: '',
				idCardInfo: '',
				phone: ''
			}
		},
		methods: {
			uploadFileImage(type) {
				let _this = this;
				this.$util.uploadImageOne({
					name: 'multipart',
					model: "user",
					pid: 7,
					count: 1
				}, url => {
					console.log(url, '上传后的照片')
					type == 1 ? _this.idCardHead = url : _this.idCardReserve = url;
					_this.analysisCard(type);
				});
			},
			//解析身份证
			analysisCard(type) {
				analyseAliIdCard({
						url: type == 1 ? this.idCardHead : this.idCardReserve
					})
					.then(res => {
						if (type == 1) {
							this.userInfo = JSON.parse(res.data.ocrData);
						} else {
							this.idCardInfo = JSON.parse(res.data.ocrData);
						}
						this.phone = uni.getStorageSync('aliPhone');
						console.log(this.userInfo, '解析后的身份')
					})
			},
			//将解析后的数据上传到服务器
			uploadUserInfo() {
				my.getAuthCode({
					scopes: 'id_verify',
					success: (authCodeRes) => {
						const authCode = authCodeRes.authCode;
						aliminiLogin({
								authCode: authCode,
								phone: uni.getStorageSync('aliPhone'),
							})
							.then(res => {
								console.log('后台传回来的信息', res)
								let submit = {
									userId: this.$Cache.get('UID'),
									sex: this.userInfo.data.face.data.sex == '男' ? 1 : 2,
									realName: this.userInfo.data.face.data.name,
									idCard: this.userInfo.data.face.data.idNumber,
									phone: uni.getStorageSync('aliPhone'),
									idCardFront: this.idCardHead,
									idCardReverse: this.idCardReserve,
									certType: 0,
									nation: this.userInfo.data.face.data.ethnicity,
									birthDate: this.transformData(this.userInfo.data.face.data
										.birthDate),
									residenceAddress: this.userInfo.data.face.data.address,
									authorityAddress: this.idCardInfo.data.back.data.issueAuthority,
									validityDateStart: this.idCardInfo.data.back.data.validPeriod
										.split('-')[0].replace(/\./g, '-'),
									validityDateEnd: this.idCardInfo.data.back.data.validPeriod.split(
										'-')[1].replace(/\./g, '-'),
									accessToken: res.data.accessToken
								}
								aliIdCardInfoUpload(submit)
									.then(resp => {
										this.$util.Tips({
											title:'认证成功'
										});
									})
							})
							.catch(err => {
								return this.$util.Tips({
									title: err
								})
							});
					}
				});


			},
			transformData(dateStr) {
				const regex = /(\d{4})年(\d{1,2})月(\d{1,2})日/;
				let dateTime = dateStr.replace(regex, '$1-$2-$3');
				dateTime = dateTime.split('-');
				if (dateTime[1] < 10) {
					dateTime[1] = '0' + dateTime[1];
				}
				if (dateTime[2] < 10) {
					dateTime[2] = '0' + dateTime[2];
				}
				return dateTime.join('-')
				//return dateStr.replace(regex, '$1-$2-$3');
				// const monthAndDay = dateParts[1].split('.');
				// const month = monthAndDay[0];
				// const day = monthAndDay[1];
				// return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userRealName {
		.userRealNameTips {
			text-align: center;
			padding: 15px;
			color: #FF6010;
			background-color: rgba(255, 249, 237, 1);
		}

		.userRealNameContent {
			width: 90%;
			margin: 20px auto;
			padding: 15px;
			border-radius: 15px;
			background-color: white;
			font-weight: bold;

			.userRealNameContentTips {
				display: flex;
				align-items: center;
				justify-content: space-between;

				& view:last-child {
					color: #FD8234;
				}
			}
		}

		.userRealNameContentUpload {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20px 0;

			& view {
				width: 49%;
			}
		}

		.userInfo {
			display: flex;
			justify-content: left;
			align-items: center;
			border-bottom: 1px solid #E4E7ED;
			padding: 10px 15px;

			& view:last-child {
				padding-left: 15px;
				color: #C0C4CC;
			}
		}

		.uploadUserInfo {
			width: 100%;
			background-color: #FD8234;
			color: white;
			font-weight: bold;
			line-height: 47px;
			position: absolute;
			bottom: 0;
		}
	}
</style>